<template>
	<div class="order clearfix">
		<div class="order_nav left">
			<router-link v-text="'待处理订单'" tag="div" to="/order/watingOrder" class="order_nav_item" active-class="active" @click.native="outTag()"></router-link>
			<router-link v-for="(item,idx) in orderType" tag="div" :key="idx" :to="item.route" class="order_nav_item" active-class="active">
				<span class="route-name">
					{{ item.name }}
					<span class="num" v-if="item.name == '排号订单'" v-text="'!'" :style="{'display':(waitNum>0?'block':'none')}"></span>
					<span class="num" v-if="item.name == '租赁订单'" v-text="'!'" :style="{'display':(leaseNum>0?'block':'none')}"></span>
				</span>
			</router-link>
		</div>   	
		<div class="order_content right">
			<router-view  @refresh="refresh" :storeName="storeName" :storeId="storeId" :printIp="printIp" :printPort="printPort" :watingOrderTime="watingOrderTime" :printsBtn="printsBtn"></router-view>
		</div>   	
	</div>
</template>

<script>
import emitter from "@/bus/index";

export default {
	props:['storeId','printIp','printPort','orderNum',"waitNum", 'printsBtn', 'storeName',"leaseNum"],
  	data(){
		return{
			orderType: [
				{ name: '已售订单', route: '/order/completeOrder'},
				{ name: '已退订单', route: '/order/retiredOrder'},
				{ name: '排号订单', route: '/order/waitSite'},
				{ name: '配送任务', route: '/order/sendOrder'},
				// { name: '未结算订单', route: '/order/hangOrder'},
				// { name: '订单查询', route: '/order/searchOrder'}
			],
			watingOrderTime:(new Date()).getTime()
		}
	},
	watch:{
		orderNum(val){
			this.watingOrderTime = (new Date()).getTime();
		}
	},
	methods: {
		refresh(number){
			//更新 未处理订单轮询
			// console.log(s)
			this.$emit('refresh',number)
		},
		outTag(){
			this.watingOrderTime = (new Date()).getTime();
		}
	},
	mounted(){
		try {
			let leaseProductEnabled = sessionStorage.getItem("leaseProductEnabled");
			this.leaseProductEnabled = leaseProductEnabled;
			if(leaseProductEnabled=="true"){
				let orderType = JSON.parse(JSON.stringify(this.orderType));
				orderType.splice(1, 0, { name: '租赁订单', route: '/order/rentOrder'});;
				this.orderType = orderType;
			}
		} catch (error) {
			console.log("error");
		}
		emitter.on("refreshWaitSite",(e)=>{
			if(e>0){
				this.waitNum = 1;
			}
		});
		emitter.on("refreshLeaseNum",(e)=>{
			if(e>0){
				this.leaseNum = 1;
			}
		});
	}
}
</script>
<style lang="scss" scoped>
	@import "order";
	.route-name{
		position: relative;
		.num {
                position: absolute;
                right: -18px;
                top: -16px;
                width: 25px;
                height: 25px;
                line-height: 23px;
                font-size: 18px;
                border-radius: 100px;
                color: #fff;
                background-color: #e66a6a;

                animation: heartbeat 2s infinite;
                -moz-animation: heartbeat 2s infinite;
                /* Firefox */
                -webkit-animation: heartbeat 2s infinite;
                /* Safari 和 Chrome */
                -o-animation: heartbeat 2s infinite;
                /* Opera */
            }
	}
</style>